<!--<style lang="scss">-->
<!--$__z-crud-table__actions-height: 45px;-->
<!--.z-crud-table {-->
<!--  &#45;&#45;z-crud-table__actions-height: #{$__z-crud-table__actions-height};-->
<!--}-->
<!--.z-crud-table__icon {-->

<!--}-->
<!--.z-crud-table__handles {-->
<!--  width: 100% !important;-->
<!--  justify-content: center;-->
<!--}-->
<!--.z-crud-table__actions {-->
<!--  height: var(&#45;&#45;z-crud-table__actions-height);-->
<!--  background: #E7EFFF;-->
<!--  border-radius: 4px 4px 0 0;-->
<!--}-->
<!--.z-crud-table__hight_sef {-->
<!--  width: 89px;-->
<!--  height: 26px;-->
<!--  background: linear-gradient(0deg, #5D87FF, #3F71FF);-->
<!--  box-shadow: 0px 2px 5px 0px rgba(111, 128, 146, 0.1);-->
<!--  border-radius: 4px;-->
<!--  border-color: transparent;-->
<!--  line-height: 0;-->
<!--  box-sizing: border-box;-->
<!--  margin-left: 12px;-->
<!--  margin-right: 20px;-->
<!--  &:hover {-->
<!--    background: linear-gradient(0deg, #5D87FF, #3F71FF);-->
<!--  }-->
<!--}-->
<!--.z-crud-table__action-ext {-->
<!--  .el-input&#45;&#45;small .el-input__inner {-->
<!--    height: 30px;-->
<!--    line-height: 30px;-->
<!--  }-->
<!--}-->
<!--.z-crud-table__icon {-->
<!--  width: max-content;-->
<!--  display: block;-->
<!--}-->
<!--.z-crud-table__action-con {-->
<!--  .z-crud-table__icon {-->
<!--    cursor: pointer;-->
<!--  }-->
<!--  .z-crud-table__buttons {-->
<!--    margin-left: 16px;-->
<!--  }-->
<!--}-->
<!--.z-crud-table__diliver {-->
<!--  width: 1px;-->
<!--  height: 23px;-->
<!--  background: linear-gradient(0deg, #5D87FF, #3F71FF);-->
<!--  box-shadow: 0px 2px 5px 0px rgba(111, 128, 146, 0.1);-->
<!--}-->
<!--.z-crud-table__action-header {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: center;-->
<!--  > img {-->
<!--    width: 16px;-->
<!--    display: block;-->
<!--    margin-left: 10px;-->
<!--  }-->
<!--}-->
<!--.z-crud-table__icon-search {-->
<!--  width: 14px;-->
<!--}-->
<!--.z-crud-table__search-input {-->
<!--  .el-input__prefix {-->
<!--    display: flex;-->
<!--    align-items: center;-->
<!--    padding-left: 4px;-->
<!--  }-->
<!--}-->
<!--.z-crud-table {-->
<!--  .z-search-table__form {-->
<!--    margin-top: 10px;-->
<!--  }-->
<!--  .el-table-column&#45;&#45;selection {-->
<!--     .cell {-->
<!--       padding: 0;-->
<!--     }-->
<!--  }-->
<!--}-->
<!--.z-crud-table:not([mode=default]) {-->
<!--  .z-table__container {-->
<!--    display: none;-->
<!--  }-->
<!--}-->

<!--</style>-->

<!--<template>-->
<!--  <div class="z-crud-table" :data-no-action="noAction" :mode="state.mode">-->
<!--    <z-search-table :id="id" ref="searchTable" :hidden-form="true"-->
<!--:selectable="selectable" :selectableWidth="30"-->
<!--                    :def="dataTable" :render-content="renderContent" v-bind="tableAttrs"-->
<!--                @single-row-click="onSingleRowClick"-->
<!--                @search-form-reset="onSearchFormReset"-->
<!--                    @selection-change="handleSelectionChange"-->
<!--                    @scroll-to-bottom="handleScrollToBottom"-->
<!--                    :row-class-name="rowClassName"-->
<!--    >-->
<!--      <template #table__content_beforeform="scope">-->
<!--        <zw-layout row class="z-crud-table__actions" v-show="!noSearchBar">-->
<!--          <zw-layout class="z-crud-table__action-con" expand center="mainAxis">-->
<!--            <z-space class="z-crud-table__buttons z-crud-table__buttons-left" column-gap="16px">-->
<!--              <img class="z-crud-table__icon z-crud-table__icon_add" @click="table__add" :src="icons.icon_Middle_tj">-->
<!--              <img class="z-crud-table__icon z-crud-table__icon_batchDelete" @click="table__batchDelete" :src="icons.icon_Middle_d">-->
<!--              <img class="z-crud-table__icon z-crud-table__icon_detail" @click="table__batchDetail" :src="icons.icon_Middle_rw">-->
<!--            </z-space>-->
<!--            <slot name="z-crud-table__table__action-con_beforeend"  v-bind="exportScope"></slot>-->
<!--          </zw-layout>-->
<!--          <slot name="z-crud-table__table__action_afterbegin"  v-bind="exportScope"></slot>-->
<!--          <zw-layout row class="z-crud-table__action-ext" center="crosAxis">-->
<!--            <el-input class="z-crud-table__search-input"-->
<!--                      v-model="quickSearchModel.value"-->
<!--                      @keyup.native.enter="detectEnter">-->
<!--              <img class="z-crud-table__icon z-crud-table__icon-search" slot="prefix" :src="icons.icon_Middle_ss">-->
<!--            </el-input>-->
<!--            <el-button type="primary" class="z-crud-table__hight_sef" @click="toggleSearchDOM">-->
<!--              <slot name="z-crud-table__table__content_search-btn">高级搜索</slot>-->
<!--            </el-button>-->
<!--            <slot name="z-crud-table__table__content_after_search" v-bind="exportScope"></slot>-->
<!--            <z-space class="z-crud-table__buttons z-crud-table__change-view" column-gap="12px">-->
<!--              <div class="z-crud-table__diliver"></div>-->
<!--              <img class="z-crud-table__icon" @click="toggleViewMode" :src="icons.icon_Middle_st">-->
<!--            </z-space>-->
<!--          </zw-layout>-->
<!--        </zw-layout>-->
<!--        <slot name="z-crud-table__table__content_beforeform"  v-bind="exportScope"></slot>-->
<!--      </template>-->
<!--      <template #table__content_afterbegin="scope">-->
<!--        <slot name="z-crud-table__table__content_afterbegin"  v-bind="exportScope"></slot>-->
<!--      </template>-->
<!--      <template #table__content_beforebegin="scope">-->
<!--        <slot name="z-crud-table__table__content_beforebegin"  v-bind="exportScope"></slot>-->
<!--      </template>-->
<!--      <template #table__table_afterend="scope">-->
<!--        <slot name="z-crud-table__table__table_afterend"  v-bind="exportScope"></slot>-->
<!--      </template>-->
<!--      <template #table__content_afterend="scope">-->
<!--        <slot name="z-crud-table__table__content_afterend"  v-bind="exportScope"></slot>-->
<!--      </template>-->
<!--      <template #table__action="scope">-->
<!--        <template v-if="scope.id === 'slot'">-->
<!--          <z-space column-gap="10px"  class="z-crud-table__handles" not-last>-->
<!--            <el-button type="text" class="z-crud-table__handle-detail"-->
<!--                       @click="table__detail(scope.row, scope.column, scope.$index, {scope})">-->
<!--              <img class="z-crud-table__icon" :src="icons.icon_Middle_ck">-->
<!--            </el-button>-->
<!--            <el-button type="text" class="z-crud-table__handle-edit"-->
<!--                       @click="table__edit(scope.row, scope.column, scope.$index, {scope})">-->
<!--              <z-icon-edit></z-icon-edit>-->
<!--            </el-button>-->
<!--            <el-button type="text" class="z-crud-table__handle-delete"-->
<!--                       @click="table__delete(scope.row, scope.column, scope.$index, {scope})">-->
<!--              <z-icon-delete></z-icon-delete>-->
<!--            </el-button>-->
<!--            <slot name="z-crud-table__handles-beforeend" v-bind="scope"></slot>-->
<!--          </z-space>-->
<!--        </template>-->
<!--      </template>-->
<!--      <template #table__content_beforebegin="scope">-->
<!--        <slot name="z-crud-table__table__content_beforebegin"  v-bind="exportScope"></slot>-->
<!--&lt;!&ndash;        <zw-layout row class="z-crud-table__actions">&ndash;&gt;-->
<!--&lt;!&ndash;          <zw-layout class="z-crud-table__action-title" expand center="mainAxis"><slot name="z-crud-table__title"></slot></zw-layout>&ndash;&gt;-->
<!--&lt;!&ndash;          <zw-layout class="z-crud-table__actions-content" row>&ndash;&gt;-->
<!--&lt;!&ndash;            <slot name="z-crud-table__actions-beforebegin" v-bind="exportScope"></slot>&ndash;&gt;-->
<!--&lt;!&ndash;            <z-space class="z-crud-table__actions-con" notLast>&ndash;&gt;-->
<!--&lt;!&ndash;              <slot name="z-crud-table__actions-afterbegin" v-bind="exportScope"></slot>&ndash;&gt;-->
<!--&lt;!&ndash;              <el-button&ndash;&gt;-->
<!--&lt;!&ndash;                  class="z-crud-table__action-def z-crud-table__action-add"&ndash;&gt;-->
<!--&lt;!&ndash;                  size="small" type="primary" icon="el-icon-plus" @click="table__add">新增</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;              <el-button&ndash;&gt;-->
<!--&lt;!&ndash;                  class="z-crud-table__action-def"&ndash;&gt;-->
<!--&lt;!&ndash;                  size="small" icon="el-icon-upload2" @click="table__import">导入</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;              <el-button&ndash;&gt;-->
<!--&lt;!&ndash;                  class="z-crud-table__action-def"&ndash;&gt;-->
<!--&lt;!&ndash;                  size="small" icon="el-icon-download" @click="table__export">导出</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;              <el-select&ndash;&gt;-->
<!--&lt;!&ndash;                  class="z-crud-table__action-def"&ndash;&gt;-->
<!--&lt;!&ndash;                  size="small" v-model="state.mode" style="width: 120px">&ndash;&gt;-->
<!--&lt;!&ndash;                <el-option label="默认" value="default"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-option v-for="view in state.views" :label="view.label" :value="view.value"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-select>&ndash;&gt;-->
<!--&lt;!&ndash;              <slot name="z-crud-table__actions-beforeend" v-bind="exportScope"></slot>&ndash;&gt;-->
<!--&lt;!&ndash;            </z-space>&ndash;&gt;-->
<!--&lt;!&ndash;            <slot name="z-crud-table__actions-afterend" v-bind="exportScope"></slot>&ndash;&gt;-->
<!--&lt;!&ndash;          </zw-layout>&ndash;&gt;-->
<!--&lt;!&ndash;        </zw-layout>&ndash;&gt;-->
<!--      </template>-->
<!--    </z-search-table>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import {createSearchActionSlots, useDataTable} from "../../hooks/datatable";-->
<!--import ZIconEdit from "../../components/z-icons/ZIconEdit";-->
<!--import ZIconDelete from "../../components/z-icons/ZIconDelete";-->
<!--import {base64Icons} from "../../components/z-icons/icons";-->
<!--import {appendColumns} from "./crudTable.jsx";-->
<!--import ZCrudGridView from "../../components/z-datatable/ZCrudGridView";-->
<!--import ZComGridView from "../../components/z-datatable/ZComGridView";-->
<!--import {CommonCurdDialgMixin} from "../../components/z-datatable/CurdDialgMixin";-->

<!--export default {-->
<!--  // components: {},-->
<!--  name: 'ZCrudTable',-->
<!--  components: {ZIconDelete, ZIconEdit},-->
<!--  props: {-->
<!--    obj: null,-->
<!--    noSearchBar: Boolean,-->
<!--    noAction: Boolean,-->
<!--    detailCom: null,-->
<!--    addCom: null,-->
<!--    editCom: null,-->
<!--    cusView: null,-->
<!--    onInit: null,-->
<!--    onDelete: null,-->
<!--    onEdit: null,-->
<!--    selectable: {-->
<!--      type: Boolean,-->
<!--      default: true-->
<!--    },-->
<!--    columnKey: {-->
<!--      type: String,-->
<!--      default: 'id'-->
<!--    },-->
<!--    rowClassName: Function,-->
<!--    limit: null,-->
<!--    tableAttrs: {-->
<!--      type: Object,-->
<!--      default() {-->
<!--        return {}-->
<!--      }-->
<!--    },-->
<!--    request: null,-->
<!--    defaultMode: {-->
<!--      type: String,-->
<!--      default: 'default'-->
<!--    }-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      quickSearchModel: {},-->
<!--      currentClickedRow: null-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    getElTable() {-->
<!--      return this.$refs.searchTable.getElTable()-->
<!--    },-->
<!--    getSelectedUUIDS() {-->
<!--      return this.$refs.searchTable.getTool().getSelectedUUIDS()-->
<!--    },-->
<!--    getCurPageUnSelectedUUIDS() {-->
<!--      let uuids = this.$refs.searchTable.getTool().getSelectedUUIDS() ?? []-->
<!--    },-->
<!--    cancelSelect() {-->
<!--      this.$refs.searchTable.cancelSelect()-->
<!--    },-->
<!--    toggleSearchDOM() {-->
<!--      let formCon = this.$el.querySelector('.z-search-table__form-con')-->
<!--      formCon.toggleAttribute('hidden')-->
<!--      // console.log('toggleSearchDOM', formCon)-->
<!--      this.$emit('switch-formcon', {formCon})-->
<!--    },-->
<!--    getFormCon() {-->
<!--      let formCon = this.$el.querySelector('.z-search-table__form-con');-->
<!--      return formCon-->
<!--    },-->
<!--    detectEnter(e) {-->
<!--      let quickFormKey = ''-->
<!--      this.dataTable.quickedMap.forEach((item, key) => {-->
<!--        // console.log('quickedMap', item, key)-->
<!--        // state.quickFormKey = key-->
<!--        // state.quickFormValue = item-->
<!--        quickFormKey = key-->
<!--      })-->

<!--      let value = this.quickSearchModel.value-->
<!--      let key = quickFormKey-->
<!--      // console.log('detectEnter', value, key)-->
<!--      // console.log(key)-->
<!--      if (key) {-->
<!--        this.table__search({-->
<!--          params: {-->
<!--            [key]: value-->
<!--          }-->
<!--        })-->
<!--      }-->
<!--      return true-->
<!--    },-->
<!--    onSingleRowClick(args) {-->
<!--      // console.log('currentClickedRow', row)-->
<!--      this.currentClickedRow = {-->
<!--        row: args[0],-->
<!--        def: args[1]-->
<!--      }-->
<!--    },-->
<!--    onSearchFormReset() {-->
<!--      // console.log('onSearchFormReset')-->
<!--    },-->
<!--    toggleViewMode() {-->
<!--      if (this.state.mode === 'default') {-->
<!--        this.state.mode = 'ZCrudGridView'-->
<!--      } else {-->
<!--        this.state.mode = 'default'-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  setup(props, ctx) {-->
<!--    let self = null-->
<!--    let outerCtx = ctx-->
<!--    // console.log(outerCtx.slots)-->
<!--    let {reactive} = globalThis.vueCompositionAPI-->
<!--    let id = ZY.rid()-->

<!--    let state = reactive({-->
<!--      mode: props.defaultMode,-->
<!--      views: [],-->
<!--      quickFormKey: '',-->
<!--      quickFormValue: {},-->
<!--      totalSelected: [],-->
<!--      currentChecked: []-->
<!--    })-->

<!--    function registerView(label, value, def) {-->
<!--      let o = {-->
<!--        id: ZY.rid(),-->
<!--        def,-->
<!--        label,-->
<!--        value,-->
<!--      }-->
<!--      state.views.push(o)-->
<!--    }-->

<!--    function resolveTds(index) {-->
<!--      let tds = []-->
<!--      let tr = document.querySelector(`#${id} .z-table__body .el-table__body-wrapper table tr:nth-child(${index + 1})`)-->
<!--      if (tr) {-->
<!--        tds = Array.of(...tr.children)-->
<!--            .filter(v => v.className.indexOf('default-column') > -1)-->
<!--            .map(v => {-->
<!--              // console.dir(v.classList)-->
<!--              let prop = ''-->
<!--              let list = Array.of(...v.classList)-->
<!--              if (list) {-->
<!--                list.forEach(function (i) {-->
<!--                  if (i.startsWith('z-table-column-prop___')) {-->
<!--                    prop = i.replace('z-table-column-prop___', '')-->
<!--                  }-->
<!--                })-->
<!--              }-->
<!--              // console.dir(prop)-->
<!--              let value = v.children[0].innerHTML-->
<!--              if (prop) {-->
<!--                return [prop, value]-->
<!--              }-->
<!--              return []-->
<!--            }).filter(v => {-->
<!--              return v.length > 1-->
<!--            })-->
<!--      }-->
<!--      // console.log(tr, tds)-->
<!--      return Object.fromEntries(tds)-->
<!--    }-->

<!--    function createEditPromise(content, dataTableDef, dataTable, {isEdit = true, dialogProps = {}, ...rest} = {}) {-->
<!--      return ctx.root.$zDialog({-->
<!--        content: content,-->
<!--        props: {-->
<!--          isEdit: isEdit,-->
<!--          // row, def, index,-->
<!--          ...rest,-->
<!--          columDefMap: dataTableDef.columnDefMap,-->
<!--          columns: dataTable.state.columns,-->
<!--          columnKey: props.columnKey-->
<!--        },-->
<!--        dialogProps: {-->
<!--          title: '编辑',-->
<!--          ['data-edit']: isEdit,-->
<!--          ...dialogProps-->
<!--        }-->
<!--      })-->
<!--    }-->
<!--    let request = props.request ? props.request : props.obj.request;-->

<!--    if (! props.obj.request) {-->
<!--      props.obj.request = request-->
<!--    }-->


<!--    // console.log(props.obj.request)-->

<!--    let dataTable;-->
<!--    let dataTableDef = {-->
<!--      defaultUrl: props.obj.defaultUrl,-->
<!--      request: props.obj.request,-->
<!--      columnDefMap: props.obj.columnDefMap,-->
<!--      appendColumns: appendColumns,-->
<!--      ...props.obj.ext-->
<!--    }-->

<!--    if (props.noAction) {-->
<!--      dataTableDef.appendColumns = []-->
<!--    }-->

<!--    dataTable = useDataTable(dataTableDef);-->
<!--    // console.log(dataTable.search)-->
<!--    ZY.lodash.set(dataTable.search, 'slots.object_beforeend', createSearchActionSlots({-->
<!--      after: ''-->
<!--    }))-->



<!--    function table__delete (row, {configAddr = 'urlMap.del', delBody = {}} = {}) {-->
<!--      // console.log(props.columnKey)-->
<!--      // let ret = {-->
<!--      //   id: row[props.columnKey]-->
<!--      // }-->
<!--      ELEMENT.MessageBox.confirm('此操作将删除该行, 是否继续?', '提示', {-->
<!--        confirmButtonText: '确定',-->
<!--        cancelButtonText: '取消',-->
<!--        type: 'warning'-->
<!--      }).then(async () => {-->
<!--        // await ctx.refs.searchTable.search()-->
<!--        let ajaxUrl = ZY.lodash.get(props.obj, configAddr)-->
<!--        if (ajaxUrl) {-->
<!--          let [err] = await ZY.awaitTo(request.delete(ajaxUrl, {-->
<!--            data: {-->
<!--              id: row[ZY.lodash.get(props.obj, 'ajaxIdKey', 'id')],-->
<!--              // data: row-->
<!--            },-->
<!--            ...delBody-->
<!--          }))-->

<!--          if (err) {-->
<!--            // ZELEMENT.Message({-->
<!--            //   type: 'danger',-->
<!--            //   message: '删除失败'-->
<!--            // });-->
<!--            return;-->
<!--          }-->
<!--        }-->

<!--        if (props.onDelete) {-->
<!--          await props.onDelete(ctx)-->
<!--        }-->
<!--        ZELEMENT.Message({-->
<!--          type: 'success',-->
<!--          message: '删除成功!'-->
<!--        });-->
<!--      }).catch(() => {-->
<!--        ZELEMENT.Message({-->
<!--          type: 'info',-->
<!--          message: '已取消删除'-->
<!--        });-->
<!--      });-->
<!--    }-->

<!--    async function table__detail (row, def, index, scope) {-->


<!--      let detailCom = props.detailCom-->

<!--      if (!detailCom) {-->
<!--        // console.log('sdsdsds', outerCtx.slots.detail_item)-->
<!--        detailCom = {-->
<!--          name: 'detail-com-' + id,-->
<!--          mixins: [-->
<!--            CommonCurdDialgMixin-->
<!--          ],-->
<!--          render(h, detailCtx) {-->
<!--            // console.log(this.$props)-->
<!--            let self = this-->
<!--            let inner_props = this.$props-->
<!--            return outerCtx.slots.detail_view({-->
<!--              ...inner_props,-->
<!--              ctx: exportScope,-->
<!--              findColumnDefByKey(key, path) {-->
<!--                let column = inner_props.columns.find(v => v.prop === key)-->
<!--                if (column) {-->
<!--                  return ZY.lodash.get(column, path)-->
<!--                }-->
<!--                return ''-->
<!--              },-->
<!--              sendConfirm(ret) {-->
<!--                self.$emit('confirm', ret)-->
<!--              },-->
<!--              sendCancel() {-->
<!--                self.$emit('cancel', {-->
<!--                })-->
<!--              }-->
<!--            })-->
<!--          }-->
<!--        }-->
<!--      }-->

<!--      CustomCusComponent.registerOnce(detailCom)-->
<!--      // if (!props.detailCom) {-->
<!--      //   return-->
<!--      // } else {-->
<!--      //   CustomCusComponent.registerOnce(props.detailCom)-->
<!--      // }-->

<!--      // ZCONSOLE.log(row)-->
<!--      ctx.root.$zDialog({-->
<!--        content: detailCom,-->
<!--        props: {-->
<!--          row, def,-->
<!--          columDefMap: dataTableDef.columnDefMap,-->
<!--          columns: dataTable.state.columns-->
<!--        },-->
<!--        dialogProps: {-->
<!--          title: '详情',-->
<!--          ...props.obj.dialogProps,-->
<!--          ...props.obj.detailDialogProps,-->
<!--          ...detailCom.dialogProps-->
<!--        }-->
<!--      }).then(res => {-->
<!--        console.log(res)-->
<!--      }).catch(res => {-->
<!--        console.log(res)-->
<!--      })-->
<!--    }-->

<!--    function table__edit (row, def, index, scope) {-->
<!--      if (!props.editCom) {return}-->
<!--      CustomCusComponent.registerOnce(props.editCom)-->

<!--      // console.log(scope)-->
<!--      createEditPromise(props.editCom, dataTableDef,dataTable, {-->
<!--        row, def, index, dialogProps: {-->
<!--          ...props.obj.dialogProps,-->
<!--          ...props.obj.editDialogProps,-->
<!--          ...props.editCom.dialogProps-->
<!--        }-->
<!--      }).then(async (res) => {-->
<!--        // await ctx.refs.searchTable.search()-->
<!--        let ajaxUrl = ZY.lodash.get(props.obj, 'urlMap.edit')-->
<!--        if (ajaxUrl) {-->
<!--          let [err] = await ZY.awaitTo(request.put(ajaxUrl, {-->
<!--            id: row.id,-->
<!--            ...res-->
<!--          }))-->
<!--          if (err) {-->
<!--            // ZELEMENT.Message({-->
<!--            //   type: 'danger',-->
<!--            //   message: '编辑失败'-->
<!--            // });-->
<!--            return;-->
<!--          }-->

<!--          ZELEMENT.Message({-->
<!--            type: 'success',-->
<!--            message: '编辑成功!'-->
<!--          });-->
<!--        }-->

<!--        if (props.onEdit) {-->
<!--          await props.onEdit(true, ret, ctx)-->
<!--        }-->


<!--      }).catch(res => {-->
<!--        console.log(res)-->
<!--      })-->
<!--    }-->

<!--    async function fileOpen({ mimeTypes = [] } = {}) {-->
<!--      let blob = null;-->
<!--      const options = {-->
<!--        mimeTypes,-->
<!--      };-->

<!--      try {-->
<!--        // if (isElectron()) {-->
<!--        //   blob = await electronOpen(options);-->
<!--        // } else {-->
<!--        //   blob = await FS.fileOpen(options);-->
<!--        // }-->
<!--        blob = await ZY_EXT.FS.fileOpen(options);-->
<!--      } catch (e) {-->
<!--        console.error(e)-->
<!--      }-->
<!--      return blob;-->
<!--    }-->

<!--    function handleSelectionChange(e) {-->
<!--      // console.log('handleSelectionChange', e)-->
<!--      state.currentChecked = e-->
<!--      let v = state.totalSelected ?? []-->
<!--      v = ZY.lodash.uniqBy(v.concat(e), 'id')-->
<!--      state.totalSelected = v-->
<!--    }-->

<!--    let exportScope = {-->
<!--      table__detail,-->
<!--      table__edit,-->
<!--      table__delete,-->
<!--      table__batchDelete,-->
<!--      table__batchDetail,-->
<!--      table__search,-->
<!--      table__add,-->
<!--      table__import,-->
<!--      table__export,-->
<!--    }-->

<!--    async function table__add() {-->
<!--      // await ctx.refs.searchTable.search()-->
<!--      if (!props.addCom) {return}-->
<!--      CustomCusComponent.registerOnce(props.addCom)-->
<!--      createEditPromise(props.addCom, dataTableDef,dataTable, {-->
<!--        isEdit: false,-->
<!--        dialogProps: {-->
<!--          title: '添加',-->
<!--          ...props.obj.dialogProps,-->
<!--          ...props.obj.addDialogProps,-->
<!--          ...props.addCom.dialogProps-->
<!--        }-->
<!--      }).then(async (ret) => {-->
<!--        // console.log(ret.data)-->
<!--        // await ctx.refs.searchTable.search()-->

<!--        let ajaxUrl = ZY.lodash.get(props.obj, 'urlMap.add')-->
<!--        if (ajaxUrl) {-->
<!--          let [err] = await ZY.awaitTo(request.post(ajaxUrl, ret))-->

<!--          if (err) {-->
<!--            // ZELEMENT.Message({-->
<!--            //   type: 'danger',-->
<!--            //   message: '添加失败'-->
<!--            // });-->
<!--            return;-->
<!--          }-->

<!--          ZELEMENT.Message({-->
<!--            type: 'success',-->
<!--            message: '添加成功!'-->
<!--          });-->
<!--        }-->


<!--        if (props.onEdit) {-->
<!--          await props.onEdit(false, ret, ctx)-->
<!--        }-->


<!--      }).catch(() => {-->
<!--        // this.$message({-->
<!--        //   type: 'info',-->
<!--        //   message: '已取消添加'-->
<!--        // });-->
<!--      });-->
<!--    }-->

<!--    async function table__import() {-->
<!--      let [err, res] = await ZY.awaitTo(fileOpen())-->
<!--      ZELEMENT.Message({-->
<!--        type: 'success',-->
<!--        message: '导入成功!'-->
<!--      });-->
<!--      // await ctx.refs.searchTable.search()-->
<!--    }-->

<!--    async function table__export() {-->
<!--      // await ctx.refs.searchTable.search()-->
<!--      ZY_EXT.saveAs(new Blob(['1']), `test_download${ZY.rid()}.txt`)-->
<!--    }-->


<!--    let renderContent = function (h, {ctx, tableProps} = {}) {-->
<!--      if (state.mode === 'default') {-->
<!--        return ''-->
<!--      }-->

<!--      const { data, tableHeight, rowKey } = ctx-->
<!--      const originTableProps = Object.keys(tableProps).reduce(-->
<!--          (result, item) => {-->
<!--            result[item] = this[item]-->
<!--            return result-->
<!--          },-->
<!--          {}-->
<!--      )-->
<!--      const inprops = {-->
<!--        ...originTableProps,-->
<!--        ...this.$attrs-->
<!--      }-->
<!--      if (tableHeight && tableHeight !== 'auto') {-->
<!--        inprops['height'] = tableHeight-->
<!--      }-->
<!--      // console.log('renderContent', dataTable)-->
<!--      let _cusView = null-->
<!--      if (props.cusView) {-->
<!--        _cusView = props.cusView-->
<!--      }-->

<!--      let curView = state.views.find(v => v.value === state.mode)-->

<!--      if (curView) {-->
<!--        _cusView = curView.def-->
<!--      }-->

<!--      if (_cusView) {-->

<!--        // registerView('视图', _cusView.name, _cusView)-->
<!--        // console.log(props.obj)-->
<!--        // console.log('cusview', _cusView, data)-->
<!--        let opt = {-->
<!--          props: {-->
<!--            ctxProps: props.obj.viewProps,-->
<!--            viewName: _cusView.name,-->
<!--            items: data,-->
<!--            columns: dataTable.state.columns,-->
<!--            columnDefMap: dataTable.columnDefMap,-->
<!--            rowKey,-->
<!--            actions: {-->
<!--              ...exportScope,-->
<!--              fire(name, ...args) {-->
<!--                let handler = ZY.lodash.get(props.obj, 'events.' + name);-->
<!--                if (handler) {-->
<!--                  handler(...args)-->
<!--                }-->
<!--              }-->
<!--            },-->
<!--            outSlots: outerCtx.slots,-->
<!--          }-->
<!--        }-->

<!--        return h(_cusView, opt)-->
<!--      }-->

<!--      return '';-->
<!--    }-->

<!--    function table__search(...opt) {-->
<!--      return ctx.refs.searchTable.search(...opt)-->
<!--    }-->

<!--    function table__batchDelete() {-->
<!--      // if (this.currentClickedRow) {-->
<!--      //   // console.log('table__batchDelete', this.currentClickedRow)-->
<!--      //   table__delete(this.currentClickedRow.row, this.currentClickedRow.def)-->
<!--      // }-->
<!--      if (state.currentChecked.length > 0) {-->
<!--        let uuids = state.currentChecked.map(v => v.id)-->
<!--        table__delete({}, {-->
<!--          configAddr: 'urlMap.batchDel',-->
<!--          delBody: {-->
<!--            uuids,-->
<!--          }-->
<!--        })-->
<!--      }-->
<!--    }-->

<!--    function table__batchDetail() {-->
<!--      if (this.currentClickedRow) {-->
<!--        // console.log('table__batchDetail', this.currentClickedRow)-->
<!--        table__detail(this.currentClickedRow.row, this.currentClickedRow.def)-->
<!--      }-->
<!--    }-->


<!--    let flag = false-->
<!--    async function handleScrollToBottom({scrollTop, target, resetListen} = {}) {-->
<!--      // console.log('handleScrollToBottom', scrollTop, target.scrollHeight)-->
<!--      // console.dir(target)-->

<!--      // if (!flag) {-->
<!--      //   flag = true-->
<!--      //   let s = await table__search();-->
<!--      //   console.log(s)-->
<!--      //   setTimeout(() => {-->
<!--      //     target.scrollTop = scrollTop;-->
<!--      //     resetListen()-->
<!--      //-->
<!--      //   }, 30)-->
<!--      // }-->
<!--      // console.log(props.obj)-->
<!--      if (props?.obj?.ext?.infinite) {-->
<!--        let s = await table__search();-->
<!--        // console.log(s)-->
<!--        setTimeout(() => {-->
<!--          target.scrollTop = scrollTop;-->
<!--          resetListen()-->

<!--        }, 30)-->
<!--      }-->

<!--    }-->



<!--    let ret = {-->
<!--      id,-->
<!--      state,-->
<!--      registerView,-->
<!--      handleSelectionChange,-->
<!--      handleScrollToBottom,-->
<!--      renderContent,-->
<!--      ...exportScope,-->
<!--      exportScope,-->
<!--      dataTable,-->
<!--      icons: base64Icons-->
<!--    }-->
<!--    // props.obj.$TABLE_CTX = ret-->

<!--    if (props.onInit) {-->
<!--      props.onInit(ret)-->
<!--    }-->


<!--    registerView('视图1', ZCrudGridView.name, ZCrudGridView)-->
<!--    registerView('视图2', ZComGridView.name, ZComGridView)-->

<!--    return ret-->

<!--  }-->
<!--}-->
<!--</script>-->
